<script>
export default {
  name: "AddAccountDialog",
  data(){
    var isUnamCanUse = (rule, value, callback) => {
      if(value && value.length>1){
        this.$http.get('accounts/is_uname_exist?uname=' + value).then(res =>{
          if(res.data.data){
            //账户已存在
            return callback(new Error('账户已存在，请重新输入'));
          }else{
            callback();
          }
        })
      }
    };
    var checnRePwd = (rule, value, callback) => {
      if (value !== this.form.pwd) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    }
    return {
      form:{
        uname:'',
        pwd:'',
        repwd:'',
        role:2
      },
      dialogVisible:false,
      rules: {
        uname: [
          {required: true, message: '请输入账号', trigger: 'blur'},
          {min: 2, max: 10, message: '长度在 2 到 15 个字符', trigger: 'blur'},
          {validator: isUnamCanUse, trigger: 'blur'}
        ],
        pwd: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 2, max: 10, message: '长度在 2 到 15 个字符', trigger: 'blur'},
        ],
        repwd: [
          {required: true, message: '请再次输入密码'},
          { validator:checnRePwd,trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    // 父元素调用此方法，传入用户id
    show_dialog() {
        this.dialogVisible = true;
    },
    reset_dialog(){
        this.$refs.user_form.resetFields();
    },
    onSubmit(){
        const _this = this;
        this.$refs.user_form.validate((valid) => {
          if(valid){
            _this.$http.post('accounts/regist',_this.form).then(res=>{
              if(res.data.data){
                _this.dialogVisible = false;
                _this.$message.success("注册成功，请登陆");
                _this.$emit('regist_ok',_this.form.uname);
              }else {
                _this.$message.error(res.data.errMsg);
              }
            })
          }
        });
    },
  }
}
</script>

<template>
    <el-dialog
        title="操作员注册"
        :visible.sync="dialogVisible"
        width="30%"
        @close="reset_dialog"
        :close-on-click-modal="false"
        style="position: relative;top:120px"
    >

            <el-form ref="user_form" :model="form" :rules="rules" label-width="80px" size="small" >

                <el-form-item label="账号" prop="uname">
                  <el-input v-model="form.uname" ></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="pwd">
                  <el-input v-model="form.pwd"></el-input>
                </el-form-item>

                <el-form-item label="确认密码" prop="repwd">
                  <el-input v-model="form.repwd"></el-input>
                </el-form-item>

                <el-form-item align="right">
                  <el-button @click="dialogVisible=false">取消</el-button>
                  <el-button type="primary" @click="onSubmit">确定</el-button>
                </el-form-item>
            </el-form>
  </el-dialog>
</template>

<style >


</style>